<template>
	<!-- 知识库列表 -->
	<view>
		<view class="page">
			<view class="example-body">
				<uni-nav-bar background-color="#003466" color="#ffffff" :status-bar="true" @click-left="back" left-icon="arrowleft" style="position: relative;">
					<view class="flex-item" style="position: absolute;left: 0;right: 0;margin: auto;width: 50%;">知识库</view>
					<view class="flex-item flex-right" style="position: absolute;right: 22px;" @click="showDrawer">
						<uni-icon type="bars" size="24" color="#ffffff"></uni-icon>
					</view>
				</uni-nav-bar>
			</view>

			<!--筛选条件-->
			<uni-drawer :visible="showRight" mode="right" @close="closeDrawer">
				<uni-search @searchData="searchData" :listData="drawerData" :listParam="listParam" :changeResult="true" @changeDrawData="changeDrawData"></uni-search>
			</uni-drawer>

			<view class="supply-search">
				<input type="text" value="" class="search-container" placeholder="请输入关键字" />
				<view class="item" v-for="(value, index) in iconType" :key="index"><uni-icon :type="value" :size="24" color="#A0A0A0" class="listsearch"></uni-icon></view>
				<!-- <view class="right-ly"></view> -->
			</view>

			<view class="attch-loadcontainer">
				<view class="attch-loadchoose" v-for="(item, index) in listData" :key="index">
					<view class="loadchoose-pic">
						<image :src="item.fileFormat == '.jpg' ? '../../../static/images/choosethree.png' : item.fileFormat == '.docx' ? '../../../static/images/wordpng.png' : '../../../static/images/choosefour.png'" mode=""></image>
					</view>
					<view class="loadchoose-words">
						<view class="loadchoose-title">{{ item.fileName }}</view>
						<view class="loadchoose-time">
							<view>{{ item.creationTime }}</view>
							<view class="filesize">
								<view>{{ item.fileSize }}</view>
								<view class="size-unit">M</view>
							</view>
						</view>
						<view class="loadchoose-content">
							<view class="loadchoose-look">
								<view class="look-png"><image src="../../../static/images/looking.png" mode=""></image></view>
								<view class="look-words">查看</view>
							</view>
							<view class="loadchoose-look">
								<view class="look-png"><image src="../../../static/images/shoucanging.png" mode=""></image></view>
								<view class="look-words">收藏</view>
							</view>
							<view class="loadchoose-look">
								<view class="look-png"><image src="../../../static/images/download.png" mode=""></image></view>
								<view class="look-words">下载</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import uniIcon from '@/components/uni-icon/uni-icon.vue';
import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';
//1. 引入组件 uni-load-more.vue
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
//2. 引入组件 uni-search.vue
import uniSearch from '@/components/uni-search/uni-search.vue';
import tools from '@/common/tools-new.js';
export default {
	data() {
		return {
			iconType: ['search'],
			showRight: false,

			//抽屉数据集合
			drawerData: [],

			//列表筛选条件
			listParam: {
				Parameter: 'tenantId',
				Operators: '1',
				QueryValue: '8b6b76dd-9d75-4358-b380-7b9cec55b4d2',
				PageSize: 8,
				PageIndex: 1,
				OrderBy: '',
				OrderByType: ''
			},

			//列表分页
			listData: [],

			//定义加载方式 'more'---contentdown  'loading'---contentrefresh  'datas'---contentnomore
			loadingType: 'more',

			//加载方式文字提示
			contentText: {
				contentdown: '上拉显示更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			}
		};
	},
	components: {
		uniNavBar,
		uniIcon,
		uniDrawer,
		uniLoadMore,
		uniSearch
	},
	methods: {
		hide() {
			this.showRight = false;
		},

		//抽屉数据
		getDrawList() {
			this.$api.AttchInfo.AttchChoose()
				.then(res => {
					console.log(res);
					this.drawerData = res[1].data.result;
				})
				.catch(res => {
					//失败进行的操作/给出提示
					uni.showToast({
						title: '接口数据请求失败',
						duration: 2000
					});
				});
		},

		//展开抽屉
		showDrawer() {
			this.showRight = true;
		},

		//关闭抽屉
		closeDrawer() {
			this.showRight = false;
		},

		confirm() {},

		back() {
			uni.navigateBack({
				delta: 1
			});
		},

		//初始化加载列表数据
		getDataList() {
			//显示加载动画
			// this.loadingType = 'more';
			// uni.showNavigationBarLoading();
			this.$api.AttchInfo.AttchList(this.listParam)
				.then(res => {
					// console.log(res);
					var list = res[1].data.result.items;
					this.listData = list;
					
					//根据时间排序
					this.listData.forEach((ele,index) => {
						ele.creationTime = this.$helper.dateFormat(ele.creationTime, false);
					})
					
					if (list.length == 0) {
						this.listData = [];
						this.loadingType = 'datas';
						//关闭动画加载
						uni.hideNavigationBarLoading();
						return false;
					}
					//关闭动画
					uni.hideNavigationBarLoading();
					//得到数据后停止更新
					uni.stopPullDownRefresh();
				})
				.catch(res => {
					//失败进行的操作/给出的提示
					uni.showToast({
						title: '失败进行的操作',
						duration: 2000
					});
				});
		},

		//检索条件
		searchData(infoData) {
			this.showRight = false;
			this.listParam = infoData;
			this.listParam.pageIndex = 1;
			this.getDataList();
		},
		
		changeDrawData(roomTypeRowGuid) {
			console.log(roomTypeRowGuid);
			let param = {
				roomtyperowguid: roomTypeRowGuid
			};
			//抽屉数据重新赋值
			this.$api.AttchInfo.AttchChoose(param).then(res => {
				this.drawerData = res[1].data.result;
			});
		},

		//列表加载更多
		getMoreDataList() {
			this.listParam.pageIndex++;
			//loadingType!=more;直接返回
			if (this.loadingType != 'more') {
				return false;
			}
			this.loadingType = 'loading';
			//显示加载动画
			uni.showNavigationBarLoading();
			//请求接口
			this.$api.AttchInfo.AttchList(this.listParam)
				.then(res => {
					if (this.listData.length == res[1].data.result.totalCount) {
						this.loadingType = 'datas';
						//关闭加载动画
						uni.hideNavigationBarLoading();
						return false;
					}
					var list = res[1].data.result.items;

					this.listData = this.listData.concat(list);
					//将loadingType归more重置
					this.loadingType = 'more';
					//关闭加载动画
					uni.hideNavigationBarLoading();
				})
				.catch(res => {
					//失败进行的操作/给出的提示
					uni.showToast({
						title: '失败进行的操作',
						duration: 2000
					});
				});
		}
	},

	//下拉刷新请求的一次数据
	onPullDownRefresh: function() {
		this.listParam.pageIndex = 1;
		this.getDataList();
	},

	//触底的时候请求诗句，即为上拉加载更多
	onReachBottom: function() {
		var timer = null;
		var _this = this;
		if (timer != null) {
			clearTimeout(timer);
		}
		timer = setTimeout(function() {
			_this.getMoreDataList();
		}, 1000);
	},

	//初次加载数据
	onLoad: function() {
		this.getDrawList();
		this.getDataList();
	},

	onNavigationBarButtonTap(e) {
		this.showRight = !this.showRight;
	},
	onBackPress() {
		if (this.showRight) {
			this.hide();
			return true;
		}
	}
};
</script>

<style>
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #f2f2f2;
}

.flex-item {
	font-size: 20px;
	text-align: center;
}

.uni-icon {
	padding-left: 42%;
}

.uni-navbar__header-btns:last-child {
	width: 120px;
}

.uni-navbar__header-btns {
	padding: 0;
}

.example-body {
	position: relative;
	left: 0;
	right: 0;
	top: 0;
	z-index: 1;
}

input {
	min-height: inherit;
}

.supply-search {
	width: 94%;
	height: 36px;
	border-radius: 17px;
	background-color: #ffffff;
	margin: 0 auto;
	margin-top: 15px;
	position: relative;
	overflow: hidden;
}

.supply-search .search-container {
	width: 76%;
	height: 36px;
	margin: 0 auto;
	background-color: #ffffff;
	font-size: 14px;
	color: #999999;
	position: absolute;
	top: 0;
	left: 42px;
}

.listsearch {
	padding: 0;
	position: absolute;
	top: 6px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.attch-loadcontainer {
	width: 96%;
	margin: 0 auto;
}

.attch-loadchoose {
	display: flex;
	background-color: #ffffff;
	border-radius: 3px;
	padding: 2%;
	margin-top: 12px;
}

.loadchoose-pic {
	width: 12%;
	height: 102px;
}

.loadchoose-pic image {
	max-width: 100%;
	max-height: 100%;
}

.loadchoose-words {
	width: 88%;
	height: 102px;
	margin-left: 30px;
	position: relative;
}

.loadchoose-title {
	width: 100%;
	font-size: 18px;
	color: #333333;
	position: absolute;
	top: 0;
	left: 0;
}

.loadchoose-time {
	width: 70%;
	font-size: 14px;
	color: #999999;
	display: flex;
	justify-content: space-between;
	position: absolute;
	top: 42px;
	left: 0;
}

.loadchoose-content {
	width: 70%;
	display: flex;
	justify-content: space-between;
	position: absolute;
	left: 0;
	bottom: 0;
}

.look-png {
	width: 15px;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.look-png image {
	max-width: 100%;
	max-height: 67%;
}

.loadchoose-look {
	width: 13%;
	height: 22px;
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	line-height: 22px;
	color: #666666;
}

.uni-title .title-draw {
	width: 94%;
	height: 20px;
	margin: 0 auto;
	font-size: 14px;
	color: #333333;
	margin-top: 5px;
}

.uni-title .top-select {
	width: 94%;
	height: 25px;
	line-height: 25px;
	font-size: 14px;
	border-radius: 3px;
	outline: none;
	margin: 0 auto;
	margin-top: 10px;
}

.show-box .input.data-v-3b0702b8 {
	font-size: 12px;
}

.uni-title .draw-choose {
	width: 80%;
	height: 30px;
	margin: 0 auto;
	margin-top: 60px;
	font-size: 16px;
	text-align: center;
	line-height: 30px;
}

.uni-title .draw-choose .draw-chooseone {
	width: 46%;
	height: 100%;
	border: 1px solid #458cd0;
	border-radius: 2px;
	color: #458cd0;
	float: left;
}

.uni-title .draw-choose .draw-choosetwo {
	width: 46%;
	height: 100%;
	border: 1px solid #458cd0;
	background: #458cd0;
	color: #ffffff;
	border-radius: 2px;
	float: right;
}

.draw-container {
	width: 82%;
	margin-left: 6px;
	margin-top: 5px;
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 16px;
}

.draw-container .draw-option {
	background-color: #eeeeee;
	font-size: 14px;
	color: #666666;
	margin: 6px;
	border-radius: 3px;
	position: relative;
	overflow: hidden;
	line-height: none;
}

.draw-container .draw-active {
	background-color: #d9eafa;
	color: #458cd0;
}

.draw-container .active-pic {
	width: 22px;
	height: 22px;
	background: url(../../../static/images/right_png.png) no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: -10px;
	right: -10px;
}

.filesize {
	display: flex;
}

.filesize .size-unit {
	margin-left: 3px;
}
</style>
